<template>
  <div ref="wrapper" class="wrapper">
    <div>
      <slot></slot>
    </div>
    <back-top @click.native="returnTop(backTopTime)" v-show="isShowBT"></back-top>
    <!-- 修饰符.native，监听一个组件的原生事件时，必须给给对应的事件加上对应的修饰符.native才能进行监听 -->
  </div>
</template>
<script>
/* 按需引入 */
import PullUp from "@better-scroll/pull-up";
import BSscroll from "@better-scroll/core";
import BackTop from "components/common/backtop/BackTop";

BSscroll.use(PullUp);
export default {
  name: "BetterScroll",
  data() {
    return {
      scroll: null,
      isShowBT: false //用来确定置顶按钮是否出现
    };
  },
  components: {
    BackTop
  },
  props: {
    probeType: {
      type: Number,
      default: 0
      //0和1为不监听滚动，2为只监听手指滑动的滚动，不监听惯性滚动，3为既监听手指滑动滚动，也监听惯性滚动
    },
    click: {
      type: Boolean,
      default: true
      //点击事件默认可运行
    },
    pullUpLoad: {
      type: Boolean,
      default: false
      // pullUpLoad需要默认设置为false，因为新版本这个设为true后默认probetype就是3了，这样所有组件监听时刻打开
    },
    backTopTime: {
      type: Number,
      default: 400
      // 返回顶部的时间，默认为400ms
    },
    resizePolling: 60
  },
  mounted() {
    //   1.创建对象
    this.scroll = new BSscroll(this.$refs.wrapper, {
      probeType: this.probeType,
      click: this.click,
      pullUpLoad: this.pullUpLoad,
      observeDOM: true,
      bounce: {
        top: true,
        bottom: true
      }
      // 新版本如果遇到滚不动的情况，要把observeDOM设为ture
    });
    // 2.监听滚动位置
    this.scroll.on("scroll", position => {
      // console.log(position);
      this.$emit("scroll", position);
      // 向父组件发送scroll事件和position
      this.isShowBT = position.y < -1000;
      //一般滑动1000px一键置顶按钮就该出来了，这个数值可以根据个人喜好设定，其实这个数值还可以再封装，但我觉得没必要，就直接写死了
    });
    // 3.监听上拉事件
    this.scroll.on("pullingUp", () => {
      this.$emit("pullingUp");
    });
  },
  methods: {
    //   调整到对应坐标的方法
    scrollTo(x, y, time = 400) {
      this.scroll && this.scroll.scrollTo(x, y, time);
    },
    //完成下拉动作
    finishPullUp() {
      this.scroll && this.scroll.finishPullUp();
    },
    // 直接置顶
    returnTop(t) {
      this.scroll && this.scroll.scrollTo(0, 0, t);
    },
    //刷新content高度，从父组件获取
    refresh() {
      // console.log('---');
      this.scroll && this.scroll.refresh();
    },
    // 拿到scroll的Y值（滑动偏移量
    getScrollY() {
      return this.scroll && this.scroll.y;
    }
  }
};
</script>
<style scoped>
</style>